/**************************************************
获取分数-绩效合同
* */
<template>
  <div class="mod-config">
    <basic-container>
        <div>
          <div :height="searchheight">
          <span style="float:right;margin-top:-20px;margin-bottom:20px;cursor: pointer;" @click="searchchangeadvanced">
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
          </span>
            <div v-show="searchadvanced">
              <el-form
                :inline="true"
                :model="searchForm"
                @keyup.enter.native="getDataList()"
                class="form-inline">
                <el-form-item label="员工编号">
                  <el-input v-model="searchForm.ygbm" placeholder="请输入员工编号" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="searchForm.ygname" placeholder="请输入员工姓名" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    class="marginLeft"
                    @click="getDataList()"
                  >检索</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="boxContain" >
            <!--操作按钮-->
            <div>
              <el-button type="primary" @click="add()">新增</el-button>
              <el-button type="danger" @click="delData()" :disabled="canDelete">删除</el-button>
            </div>
          </div>

          <!--数据列表-->
          <el-table
            style="width: 100%;margin-top:20px"
            :data="dataList"
            border
            header-align="center"
            v-loading="dataListLoading"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
            <el-table-column prop="ygbm" align="center" min-width="100" label="员工编号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="ygname" align="center"  label="姓名" show-overflow-tooltip></el-table-column>
            <el-table-column prop="deptName" align="center"  label="部门" show-overflow-tooltip></el-table-column>
            <el-table-column prop="spusernames" align="center"  label="分管领导" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span
                    v-if="scope.row.spusernames"
                    @click="editRow(scope.row)"
                    style="color:rgb(14, 37, 140);cursor:pointer"
                  >{{scope.row.spusernames}}</span>
                  <i v-else class="el-icon-edit"  style="color:rgb(14, 37, 140);cursor:pointer" @click="editRow(scope.row)"></i>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" align="center"  label="创建时间"></el-table-column>
          </el-table>
          <!--分页-->
          <div class="avue-crud__pagination">
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageData.pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageData.pageSize"
              :total="pageData.totalPage"
              background
              layout="total, sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
         <operaUserAndReview ref="operaUserAndReview" v-if="operaUserAndReview" @refreshDataList="refreshDataList"></operaUserAndReview>
         <UserCommonSelect v-if="usercomment" ref="usercomment" @submitfy="submitfy" @refreshDataList="refreshDataList"></UserCommonSelect>
    </basic-container>
  </div>
</template>

<script>

    import operaUserAndReview from "./add";
    import UserCommonSelect from "./usercomment-index";//人员选择的组件
    // 接口 api
    import {leaderList,updateEvent,deleteChoose} from "@/api/statisticsanalysis/secLeaderManage.js";
    import { mapGetters} from "vuex";
    import store from "@/store";
    export default {
        data(){
            return {
                headers: {
                    Authorization: "Bearer " + store.getters.access_token
                },
                searchForm: {}, //查询表单
                canDelete: true, // 删除表格数据的禁用
                multipleSelection: [], //表格中被选中的数据
                dataList: [],
                dataListLoading: false,
                searchadvanced: true,
                searchheight: "0",
                operaUserAndReview:false,
                hideScoreView:true,
                pageData: {
                    //分页对象
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0
                },
                usercomment: false, //人员选择显隐
                fullscreenLoading:false
            };
        },
        components: {
            operaUserAndReview,
            UserCommonSelect
        },
        filters: {
        },
        computed: {
            ...mapGetters(["permissions"])
        },
        watch: {

        },
        created() {
            this.getDataList();
        },
        methods: {
            //选择统计名称执行搜索功能
            getDataByTjmc(tjmc){
                this.searchForm.hzzqmc = tjmc ;
                this.getDataList() ;
            },
            //新增或者编辑操作
            add() {
                this.operaUserAndReview = true;
                this.$nextTick(() => {
                        this.$refs.operaUserAndReview.init();

                });
            },
            // 删除数据
            delData() {
                // 删除只能删除状态为0  1 的数据
                this.$confirm("此操作将删除选中的数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let ids = this.multipleSelection.map(it => {
                            return it.id;
                        });
                        deleteChoose(ids.toString()).then(r => {
                            if (r.data.code == 0) {
                                this.$message.success("删除成功");
                                this.getDataList();
                            } else {
                                this.$message.error(r.data.msg);
                                this.getDataList();
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            // 勾选数据
            handleSelectionChange(val) {
                if (val.length == 0) {
                    this.canDelete = true;
                } else{
                    this.canDelete = false ;
                }
                this.multipleSelection = val;
            },
            // 查询条件的展开关闭
            searchchangeadvanced() {
                this.searchadvanced = !this.searchadvanced;
                if (this.searchadvanced) {
                    this.searchheight = "auto";
                }
            },

            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                leaderList(
                    Object.assign(
                        {
                            current: this.pageData.pageIndex,
                            size: this.pageData.pageSize,
                        },
                        this.searchForm
                    )
                )
                    .then(r => {
                        if (r.data.code == 0) {
                            this.dataListLoading = false ;
                            this.dataList = r.data.data.records ;
                            this.pageData.totalPage = r.data.data.total;
                        }
                    })
                    .catch(err => {});
            },
            //刷新界面
            refreshDataList(){
                this.getDataList() ;
            },
            // 关闭弹窗
            closeDialog() {
                this.operaUserAndReview = false ;
                this.getDataList() ; //刷新界面
            },

            // 条数变化
            sizeChangeHandle(val) {
                this.pageData.pageSize = val;
                this.pageData.pageIndex = 1 ;
                this.getDataList();
            },
            // 页码分页变化
            currentChangeHandle(val) {
                this.pageData.pageIndex = val;
                this.getDataList();
            } ,
            //单行编辑
            editRow(row) {

                let arr = [] ;
                arr.push(row);

                if (arr[0].approverList){ //如果已有审批人集合，重构格式
                    arr[0].approverList = this.backPersonData(arr[0].approverList) ;
                }

                this.usercomment = true;
                this.$nextTick(() => {
                    this.$refs.usercomment.init({}, "sjkh", JSON.stringify(arr),true,'editRow');//true 表示选择审批人
                });
            },
            //选择人后
            submitfy(data) {

                //返回来选中的人员信息
                let users = [] ;
                let _this = this ;
                data.tableDataUser.map(it => {
                    let obj = {
                        ygid: it.userId, //员工id
                        ygname: it.userName, //姓名
                        deptId: it.deptId, //部门id
                        deptName: it.deptName, //部门名称
                        ygbm: it.userCode, //员工编号
                        spusernames:it.spusernames, //审批人字符串
                        approverList:it.approverList //审批人集合
                    };
                    users.push(obj);
                });


                //获取审批人字符串
                let spusernames = users.map(it=>{
                    return it.ygname  ;
                })

                let params = {} ;
                this.dataList.map(it=>{
                    if (it.id == data.id){
                        this.$set(it, "spusernames", spusernames.toString());
                        this.$set(it, "approverList", users);
                        delete  it.spuserids ;
                        delete  it.spusernames ;
                        params = it ;
                        return ;
                    }
                });

                this.fullscreenLoading = true;
                updateEvent(params).then(r => {
                    if (r.data.code == 0) {
                        this.fullscreenLoading = false;
                        this.getDataList() ;
                        this.$message.success("编辑成功");
                    }
                });
            },
            //回传的人员数据
            backPersonData(arr){
                let backPersons = [] ;
                arr.map(it=>{
                    if (it){
                        let obj = {
                            userId: it.ygid,
                            userName: it.ygname,
                            deptId: it.deptId,
                            deptName: it.deptName,
                            userCode: it.ygbm,
                            spusernames:it.spusernames,
                            approverList:it.approverList
                        };
                        backPersons.push(obj) ;
                    }
                })

                return backPersons ;
            } ,
        }
    };
</script>

<style lang="scss" scoped>
 .boxContain{padding-bottom: 10px;border-bottom:1px solid rgb(176, 189, 226);display: flex;justify-content: space-between;width: 100%}
</style>
